<template>
    <div class="login">
        <div class="logoBg">
            <img :src="logoBg" alt>
        </div>
        <div class="logo">
            <img :src="logo" alt>
        </div>
        <div class="ltext">成为最具社会价值的高端人才服务企业</div>
        <div class="login_box" v-loading="loading">
            <div>注册工程师人才网后台系统</div>
            <div class="linp_box">
                <el-input v-model="name" class="linp" size="medium" placeholder="请输入个人账号"></el-input>
                <el-input v-model="password" class="linp" size="medium" show-password placeholder="请输入登录密码"></el-input>
            </div>
            <div class="lradio">
                <el-radio @click.native.prevent="isRemberPwd(radio)" v-model="radio" label="1">记住密码</el-radio>
            </div>
            <el-button type="primary" class="lbtn" @click="doHome">登录</el-button>
        </div>
        <div class="lbottom">湖北智点道人力资源咨询有限公司</div>
    </div>
</template>

<script>
    // @ is an alias to /src
    const Base64 = require('js-base64').Base64
    import _subject from '../assets/utils/subject'

    export default {
        name: 'login',
        data() {
            return {
                loading: false,
                logoBg: require('@/assets/imgs/login_bg.png'),
                logo: require('@/assets/imgs/logo_white.png'),
                name: '',
                password: '',
                radio: '2'
            }
        },
        created(){
            let account = this.getCookie("account")
            let remember = this.getCookie("remember")
            let password = Base64.decode(this.getCookie("password"))
            if(account){
                this.name = account
                this.password = password
                this.radio = remember
            }
        },
        methods: {
            doHome() {
                if (this.name == '') {
                    this.$message.error('账号不能为空')
                } else if (this.password == '') {
                    this.$message.error('密码不能为空')
                } else {
                    //调用后台
                    this.loading = true
                    this.lAxios({
                        method: 'post', //方法
                        url: '/platform/platformLogin.do', //路径，基础路径在main.js里面配置
                        params: {name: this.name, password: this.password}
                    }).then(res => {
                        console.log(res)
                            if (res!= undefined && res.data.status == 0) {
                                localStorage.setItem('userInfo', JSON.stringify(res.data.data))
                                console.log('userInfo', localStorage.getItem('userInfo'))
                                _subject.register()
                                this.$router.push('/homepage')
                                // this.$router.push('/Content')
                            } else {
                                this.$message.error("账号不存在或密码错误！")
                            }
                        }).finally(() => {this.loading = false})
                }
            }, isRemberPwd(e) {
                if (e === '2') {
                    this.radio = '1';
                } else if (e === '1') {
                    this.radio = '2'
                }
                if (this.radio === '1') {
                    this.setCookie("account", this.name)
                    let passWord = Base64.encode(this.password)
                    this.setCookie("password", passWord)
                    this.setCookie("remember", this.radio)
                } else if (this.radio === '2') {
                    this.setCookie("account","")
                    this.setCookie("password","")
                    this.setCookie("remember", '2')
                }
                console.log("radio", this.radio)
            },
            getCookie: function (key) {
                if (document.cookie.length > 0) {
                    var start = document.cookie.indexOf(key + '=')
                    if (start !== -1) {
                        start = start + key.length + 1
                        var end = document.cookie.indexOf(';', start)
                        if (end === -1) end = document.cookie.length
                        return unescape(document.cookie.substring(start, end))
                    }
                }
                return ''
            }, setCookie: function (cName, value, expiredays) {
                var exdate = new Date()
                exdate.setDate(exdate.getDate() + expiredays)
                document.cookie = cName + '=' + decodeURIComponent(value) +
                    ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
            }
        }
    }
</script>

<style scoped>
    .logoBg {
        height: 100%;
        position: fixed;
        width: 100%;
        /* transform: translatex(-8%); */
        z-index: 2;
    }

    .logoBg > img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .logo {
        width: 180px;
        height: 25px;
        z-index: 3;
        position: fixed;
        top: 5%;
        left: 4%;
    }

    .logo > img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ltext {
        width: 918px;
        height: 75px;
        color: white;
        text-align: center;
        z-index: 3;
        font-size: 36px;
        position: fixed;
        top: 17%;
        left: 50%;
        transform: translateX(-50%);
    }

    .login_box {
        width: 460px;
        height: 414px;
        z-index: 3;
        background-color: white;
        position: fixed;
        top: 28%;
        left: 50%;
        transform: translateX(-50%);
    }

    .lbottom {
        font-size: 14px;
        color: white;
        position: fixed;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }

    .login_box > div:nth-child(1) {
        width: 288px;
        height: 24px;
        color: #3377ff;
        position: fixed;
        top: 10%;
        left: 59%;
        transform: translateX(-50%);
    }

    .linp_box {
        position: fixed;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
    }

    .linp {
        width: 360px;
        margin-top: 20px;
    }

    .lradio {
        position: fixed;
        top: 55%;
        left: 12%;
    }

    .lbtn {
        width: 360px;
        position: fixed;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
